<template>
  <div class="px-8">
    <com-filterTable
      :ref="pageConfig.key"
      class=""
      :services="pageConfig.serviceName"
      :filter-form-config="pageConfig.formConfig"
      :filterInline="false"
      :params="{
        currentLink: currentLink,
      }"
      :filterCol="4"
      filterLabelWidth="90px"
      :table-border="true"
      :showFormFilter="true"
      :showRequestNum="false"
      :top-operation="pageConfig.topOperation"
      :table-column="pageConfig.columnConfig"
      :queryDataHandle="queryDataHandle"
      :dataFormatHandle="dataFormatHandle"
      :autoLoad="true"
    />

    <com-formDialog
      ref="dialog"
      v-bind="dialogData"
      @changeOut="changeOut"
      @cancel="dialogCancelHandle"
      @submit="submitHandle"
    />
  </div>
</template>

<script>

import service from "@service";
import _ from "lodash";

export default {
  name: "voiceManage",
  data() {
    return {
      currentLink: String(new Date().getTime()),
      activeName: "tSrWorkOrderPool",
      oldFormData: null,
      comDialogData: {},
      batchSelected: [],
      pageConfig: {
        key: "getTextListByPage",
        serviceName: "getTextListByPage",
        label: "内部工单",
        params: {},
        formConfig: [
          // {key: 'wrkfmShowSwftno', label: '工单编号'},
        ],
        columnConfig: [
          // { type: "select" },
          // {
          //     "value": "fileName",
          //     "label": "文件名",
          // },
          {
            value: "fileCotent",
            label: "内容",
          },
          {
            value: 'isRecord',
            label: "是否录制",
            width: '100px',
            valueFun: (data) => {
                return data.isRecord ? '已录' : '未录';
            }
          },
          {
            value: "action",
            type: "render",
            width: 200,
            label: "操作",
            render: (h, { data: { row } }) => {
                const onCancelHandle = (flag) => {
                    this.dialogCancelHandle();
                    if(flag) {
                        row.isRecord = true;
                    }
                }
              const recordHandle = () => {
                this.comDialogData = {
                  submitHandle: (data) => {
                    return new Promise((resolve) => {
                      setTimeout(resolve(true), 1000);
                    });
                  },
                  configs: [
                    {
                      key: "record",
                      label: "",
                      noLabel: true,
                      fullLine: true,
                      type: 'render',
                      render: (h) => {
                        // return <recorder currentLink={this.currentLink} activeRow={row} cancelHandle={onCancelHandle}></recorder>
                      }
                    },
                  ],
                  activeRow: row,
                  title: "录音",
                  width: "750px",
                  height: "400px",
                  labelPosition: "left",
                  labelWidth: "90px",
                  col: 1,
                  slotRenders: {
                    footer: (h) => {
                        return <div></div>
                    }
                  }
                };
                this.$refs.dialog.show();
              };
              return (
                <el-button
                  on-click={recordHandle}
                  type="text"
                  size="mini"
                >
                  录音
                </el-button>
              );
            },
          },
        ],
        topOperation: {
          left: [
            // {
            //     name: "选中",
            //     key: "add",
            //     type: "primary",
            //     requireArguments: ["batchSelected"],
            //     handle: (batchSelected) => {
            //         console.log(batchSelected, "选中的表格数据！")
            //         this.comDialogData = {
            //             submitHandle: (data) => {
            //                 return new Promise((resolve) => {
            //                     setTimeout(resolve(true) , 1000)
            //                 })
            //             },
            //             configs: [
            //                 {
            //                     key: 'key1',
            //                     label: '输入值',
            //                     required: true
            //                 }
            //             ],
            //             batchSelected: batchSelected,
            //             title: "休眠",
            //             width: "750px",
            //             height: "200px",
            //             labelPosition: "left",
            //             labelWidth: "90px",
            //             col: 1,
            //         };
            //         this.$refs.dialog.show();
            //     },
            // },
          ],
        },
      },
    };
  },
  watch: {},
  computed: {
    dialogData() {
      let { comDialogData } = this;
      return {
        configs: this[comDialogData.configName] || this.formDialogConfig,
        ...comDialogData,
      };
    },
    formDialogConfig() {
      return [];
    },
  },
  mounted() {},
  methods: {
    changeOut({ key, formData } = {}) {
      this.oldFormData = { ...formData };
    },
    dataFormatHandle(data) {
        data.list = (data.list || []).map(v => {
            return {
                ...v,
                isRecord: false
            }
        })
        return data;

    },
    queryDataHandle(params) {
      let temp = {
        ...params,
      };
      return temp;
    },
    loadList() {
      let ref = this.$refs[this.activeName];
      if (Array.isArray(ref)) {
        ref = ref[0];
      }

      ref && ref.filterFormQueryHandle();
    },
    dialogCancelHandle() {
      this.$refs.dialog.close();
    },
    async submitHandle(data) {
      let handle = this.dialogData.submitHandle;
      handle = typeof handle !== "function" ? this[handle] : handle;
      if (handle) {
        let loading = await this.$store.dispatch("global/loading");
        handle(data)
          .then((res) => {
            loading.close();
            this.$refs.dialog.close();
            this.loadList();
          })
          .catch((e) => {
            loading.close();
          });
      }
    },
    // 休眠处理函数
    claimOrderHandle(data) {
      const selected = this.comDialogData.batchSelected;
      return service("sleep", {
        data: {
          ...data,
          problemProcessIds: (selected || [])
            .map((item) => item.wrkfmId)
            .join(","),
          provCode: this.provCode,
          staffId: this.staffId,
        },
      });
    },
    // 录音
    recordHandle(row) {
      console.log(row, "=======row=======");
    },
  },
};
</script>
